<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <router-link :to="{name:'FoodsEditor'}" class="el-button el-button--danger">新增</router-link>
        <el-table :data="data" stripe border style="width: 100%">
<el-table-column align="center" type="index" label="序号" width="80">
</el-table-column>
<el-table-column label="图片" width="100">
    <template scope="scope">
        <img class="p-img" :src="'http://localhost:3000' + scope.row.img">
    </template>
</el-table-column>
<el-table-column prop="name" label="名字" width="180">
</el-table-column>
<el-table-column prop="type" label="分类" width="180">
</el-table-column>
<el-table-column prop="description" label="备注">
</el-table-column>
<el-table-column label="操作">
    <template scope="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
</el-table-column>
</el-table>
<div class="centers">
    <div class="block">
        <el-pagination layout="prev, pager, next" :page-count="pageCount" @current-change="pageChange">
        </el-pagination>
    </div>
</div>
<el-dialog title="提示" v-model="dialogVisible" size="tiny">
    <span>{{dialogMsg}}</span>
    <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false;this.delItem={}">取 消</el-button>
                <el-button type="primary" @click="doDel">确 定</el-button>
            </span>
</el-dialog>
</div>
</template>
<script>
    import api from '../../services/api_food'
    export default {
        data() {
            return {
                data: [],
                pageCount: 1,
                pageIndex: 1,
                dialogVisible: false,
                delItem: {}, 
                dialogMsg: ''
            }
        },
        methods: {
            handleEdit(index, row) {
                this.$router.push({ name: 'FoodsEditor', params: { id: row._id } })
            },
            handleDelete(index, row) {
                this.dialogVisible = true
                this.dialogMsg = `确认删除:${row.name}`
                this.delItem = row
            },
            doDel: function () {
                this.dialogVisible = false
                api.delete(this.delItem._id,this.delItem.img, function (res) {
                    if (res.status == 'y') {
                        this.$message.success('删除成功')
                        this.$router.push({ name: 'Foods', query: { random: Math.random() } })
                    } else {
                        this.$message.error(res.msg)
                    }
                }.bind(this))
            },
            getData() {
                api.getDate(this.pageIndex, function (res) {
                    this.pageCount = res.data.pageCount
                    this.data = res.data.res
                }.bind(this))
            },
            pageChange(page) {
                this.pageIndex = page
                this.getData()
            }
        },
        created: function () {
            this.getData()
        },
        watch: {
            $route: function () {
                this.getData(this.pager)
            },
            $pager: function () {
                this.getData(this.pager)
            }
        }
    }

</script>
<style>
    .p-img {
        max-width: 60px;
        margin-top: 7px;
    }
    .centers{
        width: 100%;
        text-align: center;
    }
</style>